<template>
  <div class="report">
    <el-row>
      <el-card>
        <div style="color: black;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="工资报表" name="first">
              <div style="text-align: right;">
                <el-button type="primary" @click="exportExcel($route.params.month)">导出</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="mobile"
          label="手机号"
          width="180"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="180"
        />
        <el-table-column
          prop="departmentName"
          label="部门名称"
          width="180"
        />
        <el-table-column
          prop="inServiceStatus"
          label="在职状态"
          width="180"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.inServiceStatus === 1">在职</el-tag>
            <el-tag v-else>离职</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="providentFundIndividual"
          label="公积金个人"
          width="180"
        />
        <el-table-column
          prop="socialSecurityIndividual"
          label="社保个人"
          width="180"
        />
        <el-table-column
          prop="socialSecurityEnterprise"
          label="社保企业"
          width="180"
        />
        <el-table-column
          prop="providentFundEnterprises"
          label="公积金企业"
          width="180"
        />
        <el-table-column
          prop="socialSecurityProvidentFundEnterprises"
          label="公积金社保企业"
          width="180"
        />
        <el-table-column
          prop="baseSalaryByMonth"
          label="基本工资"
          width="180"
        />
        <el-table-column
          prop="currentBaseSalary"
          label="岗位工资"
          width="180"
        />
        <el-table-column
          prop="baseSalaryToTaxByMonth"
          label="福利津贴"
          width="180"
        />
        <el-table-column
          prop="attendanceDeductionMonthly"
          label="考勤扣款"
          width="180"
        />
        <el-table-column
          prop="salaryBeforeTax"
          label="税前工资合计"
          width="180"
        />
        <el-table-column
          prop="salaryByTax"
          label="应纳税工资"
          width="180"
        />
        <el-table-column
          prop="tax"
          label="应扣税"
          width="180"
        />
        <el-table-column
          prop="payment"
          label="实发工资"
          width="180"
        />
      </el-table>
    </el-row>
    <el-row style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="guidang">{{ `归档${this.$route.params.month.substring(4,6)}报表` }}</el-button>
      <el-button type="primary" @click="newReport">新建报表</el-button>
      <el-button @click="$router.back()">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { getReportList, exportReportList, archiveSalarys, newReport } from '@/api/salarys'
import FileSaver from 'file-saver'
export default {

  data() {
    return {
      activeName: 'first',
      tableData: []
    }
  },
  created() {
    console.log('report', this.$route.params.month)
    this.loadData(this.$route.params.month)
  },
  methods: {
    guidang() {
      this.$confirm('您确认归档当月报表吗？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await archiveSalarys(this.$route.params.month)
        this.$message.success('归档成功')
      })
    },
    newReport() {
      this.$confirm(`您将创建 《 ${this.getNextMonth(this.$route.params.month, ['年', '月'])} 》 报表`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        // await archiveSalarys(this.$route.params.month)
        // this.$message.success('归档成功')
        await newReport(this.getNextMonth(this.$route.params.month, ['-', '']))
        this.$message.success('新建报表成功')
        this.loadData(this.$route.params.month)
      })
    },
    getNextMonth(yearMonth, arr) {
      const year = yearMonth.substring(0, 4)
      const month = yearMonth.substring(4, 6)
      const date = new Date(year + '-' + month + '-01')
      date.setMonth(date.getMonth() + 1)

      return date.getFullYear() + arr[0] + (date.getMonth() + 1) + arr[1]
    },

    async exportExcel(yearMonth) {
      console.log('exportExcel')
      const res = await exportReportList({ yearMonth: yearMonth })
      console.log('res', res)
      FileSaver.saveAs(res, `202502.xlsx`) // 下载文件
    },
    async loadData(yearMonth) {
      const res = await getReportList({ yearMonth: yearMonth, opType: 1 })
      console.log('res', res)
      this.tableData = res
    }
  }
}
</script>

<style scoped>
    .report{
        padding: 20px;
    }
    ::v-deep(.el-tabs__item) {
        font-size: 20px; /* 设置字体大小 */
        color: black; /* 设置字体颜色 */
    }
    /* 覆盖下划线的颜色 */
    .report >>> .el-tabs__active-bar {
        background-color: black; /* 例如: #409EFF */
    }
    .warning-row{
        background-color: white;
    }
</style>
